@import '_var.scss';

.container{
    @include index-wh;
    background: url(../images/bg-question.png) no-repeat;
    background-size: contain;
    position: relative;
    overflow: hidden;
    .question{
        @include wh(5.5rem,auto);
        margin: 0 auto;
        margin-top: 1.04rem;
        .content{
            font-size: .3333rem;
            color: #fff;
            text-align: left;
        }
        .pic{
            @include center;
            z-index: 10;
        }
    }
    .answer{
        @include position($t:6.83rem,$l:.58rem);
        @for $i from 1 to 5{
            .ans#{$i}{
                @include wh(3.68rem,.63rem);
                background: url(../images/selection.png) no-repeat;
                background-size: contain;
                margin-bottom: .28rem;
                display: block;
                font-size: .2752rem;
                line-height: .5rem;
                padding-left:.23rem;
            }
        }
        .selected{
            background-image: url(../images/selected.png);
        }
    }
    .cloud{
        @include wh(6.4rem,1.45rem);
        background: url(../images/cloud-group.png) no-repeat;
        background-size: contain;
        @include position($t:4.17rem);
        z-index: 1;
    }
    .symbol{
        @include position($t:7.13rem,$l:4.77rem);
        .dog{
            @include wh(.85rem,1rem);
            @include position($t:2.66rem,$l:-0.07rem);
            background-size: contain;
            @include Animation;
        }
        .note{
            @include wh(1.12rem,3.53rem);
            background: url(../images/notes.png) no-repeat;
            background-size: contain;
            @include position($t:.22rem,$l:.63rem);
        }
    }
}


